<template>
    <div class='goods-page'>
        <div class="container">
            <!-- 面包屑 -->
            <Breadcrumb :list="bread" />
            <!-- 商品信息 -->
            <div class="goods-info">
                <div class="media">
                    <ProductImage :list="product.mainPictures" />
                    <ProductSales />
                </div>
                <div class="spec">
                    <!-- 名字区组件 -->
                    <ProductName :product="product" />
                    <!-- 规格组件 -->
                    <ProductSku />
                    <!-- 数量 -->
                    <NumBox label="数量" v-model="num" />
                    <Button type="primary" style="margin-top:20px;">加入购物车</Button>
                </div>
            </div>
            <!-- 商品推荐 -->
            <ProductRelevant :productId="product.id" />
            <!-- 商品详情 -->
            <div class="goods-footer">
                <div class="goods-article">
                    <!-- 商品+评价 -->
                    <div class="goods-tabs">
                        <ProductTabs :product="product" />
                    </div>
                    <!-- 注意事项 -->
                    <div class="goods-warn">
                        <ProductWarn />
                    </div>
                </div>
                <!-- 24热榜+专题推荐 -->
                <div class="goods-aside">
                    <ProductHot :productId="product.id" :type="1" />
                    <ProductHot :productId="product.id" :type="2" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { getProduct } from '@/api/product'
import { watch, ref } from 'vue';
import ProductRelevant from './components/product-relevant.vue'
import ProductImage from './components/product-image.vue'
import ProductName from './components/product-name.vue'
import ProductSales from './components/product-sales.vue'
import ProductSku from './components/product-sku.vue'
import ProductTabs from './components/product-tabs.vue'
import ProductHot from './components/product-hot.vue'
import ProductWarn from './components/product-warn.vue';
import Breadcrumb from '@/components/breadcrumb.vue'

const route = useRoute()

const bread = ref([])
const getBread = (res) => {
    const arr = res.categories.reverse()
    const curr = {
        id: res.id,
        layer: 3,
        name: res.name
    }
    bread.value = [...arr, curr]
}

const product = ref({})
watch(() => route.params.id, async (newVal) => {
    if (newVal && `/product/${route.params.id}` === route.path) {
        const { result } = await getProduct(route.params.id)
        product.value = result
        getBread(result)
    }
}, { immediate: true })

const num = ref(0)
</script>
<style scoped lang='scss'>
.goods-page {
    .goods-info {
        min-height: 600px;
        background: #fff;
    }

    .goods-footer {
        display: flex;
        margin-top: 20px;

        .goods-article {
            width: 940px;
            margin-right: 20px;
        }

        .goods-aside {
            width: 280px;
            min-height: 1000px;
        }
    }

    .goods-tabs {
        min-height: 600px;
        background: #fff;
    }

    .goods-warn {
        min-height: 600px;
        background: #fff;
        margin-top: 20px;
    }

    .goods-info {
        min-height: 600px;
        background: #fff;
        display: flex;

        .media {
            width: 580px;
            height: 600px;
            padding: 30px 50px;
        }

        .spec {
            flex: 1;
            padding: 30px 30px 30px 0;
        }
    }
}
</style>